/**
 * 在网页中注入dom筛选器  
 */
Rsd.define('Rsd.tool.PageEditBar', {
    extend: 'Rsd.container.Component',
    requires: [
        'Rsd.control.List',
        'Rsd.control.Svg',
        'Rsd.form.Slider',
        'Rsd.form.Input',
        'Rsd.form.Image',
        'Rsd.form.Button',
        'Rsd.form.Number',
        'Rsd.form.Text',
        'Rsd.form.TextFK',
        'Rsd.form.ComboBox',
        'Rsd.control.Canvas'
    ],
    xtype: 'page-editor-bar',
    width: "100%",
    height: 60,
    style: {
        fontSize: '120%',
        lineHeight: 45,
        backgroundColor: '#f2f5f4ab'
    },
    layout: 'hbox',
    items: [
        {
            name: 'edit_mode',
            xtype: 'combobox',
            margin: '0 20 0 20',
            label: false,
            readonly: true,
            disabled: true,
            nullText: null,//不显示
            width: 180,
            height: 35,
            value: 'redjs_hermit',
            dataSource: [
                { text: "RedJs页面", value: 'redjs_hermit' },
                { text: "RedJs模板页", value: 'redjs_tpl' },
                { text: "Dom", value: 'html_dom' }
            ]
        },
        {
            name: 'dom_expression',
            xtype: 'text',
            label: false,
            readonly: true,
            placeholder: 'DOM内容查找',
            width: 300,
            height: 35,
            style: {
            }
        },
        {
            name: 'btn_find',
            xtype: 'svg',
            margin: '0 20 0 0',
            label: false,
            disabled: true,
            width: 40,
            height: 40,
            dataSource: { 
                "viewBox": "0 0 1024 1024", 
                "path": "M947.942255 886.008182 720.970894 659.243529c48.977481-62.368466 78.178547-140.907217 78.178547-226.249931 0-202.907293-165.033707-367.395578-368.613312-367.395578-203.580628 0-368.616382 164.489308-368.616382 367.395578 0 202.90627 165.035754 367.395578 368.616382 367.395578 85.758176 0 164.673503-29.192879 227.295749-78.146824l226.938616 226.728838c12.769838 12.727882 33.475416 12.727882 46.246277 0l16.925485-16.870226C960.713117 919.374104 960.713117 898.736065 947.942255 886.008182zM430.536129 711.482287c-154.315598 0-279.414781-124.682697-279.414781-278.487665 0-153.805992 125.099183-278.488689 279.414781-278.488689 154.315598 0 279.410688 124.68372 279.410688 278.488689C709.946816 586.79959 584.851727 711.482287 430.536129 711.482287z" 
            },
            style: { cursor: 'pointer' },
            handler: 'btn_select'
        },
        {
            width: 20
        },
        {
            name: 'page_title',
            xtype: 'text',
            margin: '0 20 0 20',
            label: false,
            readonly: true,
            placeholder: '页面标题',
            width: 300,
            height: 35,
            style: {
            }
        },
        {
            xtype: 'svg',
            margin: '0 20 0 0',
            label: {
                content: '页面设置',
                space: 10,
                position: 'right',
            },
            width: 110,
            height: 35,
            dataSource: { 
                "viewBox": "0 0 1024 1024", 
                "path": "M116.71 143h790.58a52.71 52.71 0 1 1 0 105.41H116.71a52.71 52.71 0 1 1 0-105.41z m0 316.24h527.05a52.71 52.71 0 1 1 0 105.41h-527a52.71 52.71 0 1 1 0-105.41z m0 316.23h632.47a52.71 52.71 0 0 1 0 105.41H116.71a52.71 52.71 0 1 1 0-105.41z" 
            },
            style: {
                fontSize: '120%',
                color: '#1d47cb',
                cursor: 'pointer',
                textDecoration: 'underline',
                textUnderlineOffset: '5px'
            },
            listeners: {
                'click': {
                    element: 'dom',
                    fn: function (sender, event) {
                        Rsd.popup('页面head部分设置');
                    }
                }
            }
        },
        {
            xtype: 'svg',
            margin: '0 20 0 0',
            label: {
                content: '模块管理',
                space: 5,
                position: 'right'
            },
            width: 110,
            height: 35,
            dataSource: { 
                "viewBox": "0 0 1024 1024", 
                "paths": [
                    "M473.6 230.4H192c-49.28 0-89.6 40.32-89.6 89.6v512c0 49.28 40.32 89.6 89.6 89.6h512c49.28 0 89.6-40.32 89.6-89.6V550.4h-320v-320z m-51.2 640H192c-21.12 0-38.4-17.28-38.4-38.4V601.6h268.8v268.8z m320-268.8V832c0 21.12-17.28 38.4-38.4 38.4H473.6V601.6h268.8z m-588.8-51.2V320c0-21.12 17.28-38.4 38.4-38.4h230.4v268.8H153.6z", 
                    "M832 102.4H550.4v371.2h371.2V192c0-49.28-40.32-89.6-89.6-89.6z m38.4 320H601.6V153.6H832c21.12 0 38.4 17.28 38.4 38.4v230.4z"
                ] 
            },
            style: {
                fontSize: '120%',
                color: '#bf3d3d',
                cursor: 'pointer',
                textDecoration: 'underline',
                textUnderlineOffset: '5px'
            },
            listeners: {
                'click': {
                    element: 'dom',
                    fn: function (sender, event) {
                        var me = sender.parent;
                        var page = me.getPageApp().currentPage;
                        var page_data = me.getPageData(page);
                       
                        var layouter = Rsd.create('Rsd.tool.HermitPageLayouter', {
                            title: '页面模块管理',
                            parent:me,
                            page: page,
                            pageConfig: page_data
                        }).showDialog();
                        
                        me.funApplyByIOC(me.onAfterShowLayouter,[layouter]);
                        
                    }
                }
            }
        },
        {
            xtype: 'svg',
            margin: '0 20 0 0',
            label: {
                content: '响应模式',
                space: 5,
                position: 'right'
            },
            width: 110,
            height: 35,
            dataSource: { "viewBox": "0 0 1024 1024", "path": "M718.5 974.9H305.7c-40.9 0-74.1-33.1-74.2-74V123.1c0.1-40.9 33.3-74 74.2-74h412.8c40.9 0 74.2 33.1 74.3 74v777.8c-0.1 41-33.4 74.1-74.3 74zM282.8 810.2v90.7c0 12.6 10.3 22.8 22.9 22.8h412.6c12.6 0 22.8-10.2 22.9-22.8v-90.7H282.8z m0-590.3V759h458.3V219.9H282.8z m22.9-119.6c-12.6 0-22.8 10.2-22.9 22.8v45.6h458.5v-45.6c0-12.6-10.3-22.8-22.9-22.8H305.7z m630.5 791.2h-73.8c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h73.8c9.7 0 18.9-3.8 25.8-10.6 6.8-6.7 10.7-15.8 10.7-25.3V220.5c0-20.1-16.4-36.4-36.5-36.4h-73.8c-14.2 0.3-25.9-11.1-26.2-25.3-0.3-14.2 11.1-25.9 25.3-26.2h74.7c48.4 0 87.7 39.2 87.8 87.6v583.6c-0.1 48.5-39.4 87.7-87.8 87.7z m-373 0H460.8c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h102.3c14.2 0 25.7 11.5 25.7 25.7 0.1 14.2-11.4 25.7-25.6 25.7z m-401.5-0.2H87.8C39.4 891.3 0.1 852.1 0 803.7V220.1c0.1-48.4 39.4-87.6 87.8-87.6h73.8c14.2-0.3 25.9 11.1 26.2 25.3 0.3 14.2-11.1 25.9-25.3 26.2H87.8c-20.1 0-36.4 16.3-36.5 36.4v583.2c0.1 20.1 16.4 36.4 36.5 36.4h73.8c14.2 0 25.7 11.5 25.7 25.7 0.1 14.1-11.4 25.6-25.6 25.6z" },
            style: {
                fontSize: '120%',
                color: '#3c352ce3',
                cursor: 'pointer',
                textDecoration: 'underline',
                textUnderlineOffset: '5px'
            },
            listeners: {
                'click': {
                    element: 'dom',
                    fn: function (sender, event) {
                        Rsd.popup('响应模式下查看');
                    }
                }
            }
        },
        {
            flex: 1
        },
        {
            xtype: 'button',
            text: '暂 存',
            width: 90,
            height: 40,
            style: { backgroundColor: '#009cff' },
            handler: 'btn_save'
        },
        {
            xtype: 'button',
            text: '预 览',
            width: 90,
            height: 40,
            style: { backgroundColor: '#8f29c9' },
            handler: 'btn_preview'
        },
        {
            xtype: 'button',
            text: '发 布',
            width: 90,
            height: 40,
            style: { backgroundColor: '#1a7a1a' },
            handler: 'btn_publish'
        },
        {
            width: 15
        }
    ],
    documentIframe: "",
    key: null,
    documentTitle: '',
    domSelector: '',
    onShowDomEditor: null,
    onBeforeCloseEditor: null,
    saveHandler:'',
    publishHandler:'',
    previewHandler:'',
    /**
     * 代开布局窗体
     */
    onAfterShowLayouter:null,
    /*
       *
       * */
    constructor: function PageEditBar(config) {

        config = config || {};
        this.apply(config);

    },
    /**
     * 
     */
    load: function load() {
        var me = this;
        var iframe = document.getElementById(me.documentIframe);
        if (!iframe) {
            alert('iframe not found by id: ' + me.documentIframe);
            return;
        }
        var doc = iframe.contentDocument;
        if (!doc) {
            alert('document not load');
            return;
        }

        this.getItemByName('edit_mode').setValue(me.editMode || 'html_dom');
        this.getItemByName('page_title').setValue(doc.title || me.documentTitle);
        this.getItemByName('dom_expression').setValue(me.domSelector || '');
        //要在frame 加载完成后 进行dom 选择
        setTimeout(function () {
            me.btn_select();
        }, 500)

    },
    /**
     * 
     * @param {*} dom 
     */
    showEditor: function showEditor(dom) {
        var me = this;
        var dom_edit_mode = this.getItemByName('edit_mode').getValue();
        //在父页面创建交互
        var editor = top.Rsd.create('Rsd.tool.DomEditor', {
            header: {
                content: "",
                align: 'left',
                style: {
                    //fontSize: '130%',
                    backgroundColor: '#627285',
                    color: '#fff'
                }
            }, 
            width: '95%',
            height: '98%',
            style:{
                overflow:'visible',
            },
            targetDom: dom,
            mode: dom_edit_mode || 'redjs_hermit',
            pageApp: me.getPageApp(),//当前编辑页面的redjs app对象
            beforeClose: function () {
                if (me.onBeforeCloseEditor) {
                    me.funApplyByIOC(me.onBeforeCloseEditor, []);
                }
                else {
                    alert('onBeforeCloseEditor不存在');
                }
            }
        });

        if (me.onShowDomEditor) {
            me.funApplyByIOC(me.onShowDomEditor, [editor]);
            //编辑器 展示后 定位
            dom.scrollIntoView();
            //console.log('scrollIntoView:' + dom.id); 
        }
        else {
            alert('onShowDomEditor不存在');
        }
    },
     /**
     * 获取 当前编辑页面的redjs app对象
     */
    getPageApp: function getPageApp() {
        return this.pageApp;
    },
    /**
     * 
     * @param {*} page 
     * @returns 
     */
    getPageData: function getPageData(page) {
        var dom_edit_mode = this.getItemByName('edit_mode').getValue();
        var page_data = {};
        if (dom_edit_mode == 'html_dom') {
            var doc = document.getElementById(me.documentIframe).documentContent;
            //console.log(doc.all);
        }
        else {

            for (var i in page.items) {
                var item = page.items[i];
                if (item.editInMaster) {
                    continue;
                }
                //console.log(item.name);
                page_data[item.name] = [];
                for (var j in item.items) {
                    var _sub_item = item.items[j];
                    if (_sub_item.schema) {
                        var data = _sub_item.schema.getData(_sub_item);
                        page_data[item.name].push(data);
                    }
                }
            }

        }
        return page_data;
    },
    /**
     * 
     */
    btn_select: function btn_select() {
        var me = this;
        var selector = this.getItemByName('dom_expression').getValue() || "[rsd-tpl]";
        //console.log(selector);
        //必须先筛选dom,因为：querySelectorAll有作用域限制，top.Rsd.patchButton 只能在顶层窗体中查找；无法在iframe的document中查找
        var iframe = document.getElementById(me.documentIframe);
        if (!iframe) {
            alert('iframe not found by id: ' + me.documentIframe);
            return;
        }
        var doc = iframe.contentDocument;
        if (!doc) {
            alert('document not load');
            return;
        }

        var doms = doc.querySelectorAll(selector);
        //console.log(doms);
        var rs = Rsd.patchButton(doms, function (dom) { 
            //console.log('page edit bar show dom editor ' + dom.id);
            me.showEditor(dom, {}); 
        });//, '编 辑', '点击编辑设置绑定数据' //在dom中添加一个编辑按钮 会破坏原dom结构，从而带来不可预知的结果。

        console.debug('共找到' + rs + '个对象');
        setTimeout(function () {
            Rsd.showTip('点击任意红色边框的控件，可进行内容编辑', 280, 50, 50, 10, 'bottom', 7000);
        }, 1000);

    },
    /**
     * 
     */
    btn_save: function btn_save() {
        var me = this;
        if (!me.saveHandler) {
            alert('Property saveHandler is empty');
            return;
        }

        var page = me.getPageApp().currentPage;
        var page_data = me.getPageData(page);
        me.funApplyByIOC(me.saveHandler, [page, page_data]);
    },
   
    /**
     * 
     */
    btn_preview: function btn_preview() {
        var me = this;
         if (!me.previewHandler) {
            alert('Property previewHandler is empty');
            return;
        }
        
        var page = me.getPageApp().currentPage;
        var page_data = me.getPageData(page);
        me.funApplyByIOC(me.previewHandler, [page, page_data]);
    },
    /**
     * 
     */
    btn_publish: function btn_publish() {
        var me = this;
        if (!me.publishHandler) {
            alert('Property publishHandler is empty');
            return;
        }
        var page = me.getPageApp().currentPage;
        var page_data = me.getPageData(page);
        me.funApplyByIOC(me.publishHandler, [page, page_data]);

    }

}, function (type) {

});